<template>
	<div @click.stop="clickFn" class="label">
		<div class="title">{{ data.name }}</div>
		<div class="flex m-t-4">
			<img :src="getImgUrl(data.img)" class="img" />
			<div class="w100 flex-col m-around p-b-4">
				<div>
					<div class="flex m-between">
						<span class="key">进度</span>
						<span class="val">{{ data.p1 }}%</span>
					</div>
					<el-progress :percentage="data.p1" :show-text="false" />
				</div>
				<div class="flex m-between">
					<span class="key">设计长度</span>
					<span class="val">{{ data.p2 }}米</span>
				</div>
				<div class="flex m-between">
					<span class="key">当前已掘</span>
					<span class="val">{{ data.p3 }}米</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="labelDemo">
const props = defineProps({
		data: {},
		callBack: Function
	}),
	{ data } = toRefs(props)

// 点击事件
function clickFn() {
	props.callBack?.apply()
}
</script>

<style lang="scss" scoped>
.label {
	pointer-events: auto;
	z-index: 1000;
	background: url('@/assets/img/label/blue.png');
	background-size: 100% 100%;
	padding: 2px 10px 8px 8px;
	min-width: 250px;
	color: #fff;
	.title {
		font-size: 15px;
		color: #eeeeee;
	}
	.img {
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}
	.key {
		font-size: 10px;
		color: #a5bcc4;
	}
	.val {
		font-size: 10px;
		color: #d0f1fc;
	}
}
</style>
